<template>
  <el-select
    v-model="value"
    class="tag-input"
    :multiple-limit="5"
    default-first-option
    multiple
    clearable
    filterable
    allow-create
    @change="setVal"
    placeholder="单个词不超过30字符，最多20词，回车键隔开"
    popper-class="hidden-pop"
    :disabled="disabled"
  />
</template>

<script setup lang="ts">
const props = defineProps({
  value: String,
  disabled: Boolean
})
const emit = defineEmits(['updateValue'])
const { value, disabled } = toRefs(props)
const setVal = (val) => {
  emit('updateValue', val)
}
</script>

<style lang="scss" scoped>
.tag-input {
  :deep(.el-select__input) {
    margin-left: 8px;
  }

  :deep(.el-icon-arrow-up) {
    &::before {
      content: '\E78D';
    }
  }
}
</style>

<style>
.hidden-pop {
  display: none;
}
</style>
